<template>
  <div>
    <van-nav-bar title="考勤打卡" left-arrow @click-left="$router.go(-1)" />
    <div class="top_bg">
      <div style="padding: 20px 15px; display: flex">
        <van-image round width="3.5rem" height="3.5rem" :src="userInfo.pic" />
        <div class="top_right">
          <div style="fontsize: 18px">{{ userInfo.name }}</div>
          <div>考勤组：{{ userInfo.attendGroup }}</div>
          <div>服务项目：实施-2021年-数字甘肃</div>
          <div>里程碑：平台上线V2.0</div>
          <div>项目编码：XM-20211224-207166</div>
        </div>
        <img src="../../../assets/image/check_list.png" class="check_icon" @click="$router.push('record')"/>
      </div>
    </div>
    <div style="background: #fff; paddingtop: 1.5rem">
      <van-notice-bar
        :scrollable="false"
        background="#fff"
        color="#777"
        left-icon="volume-o"
        text="新的一天，从良好的工作习惯开始"
      />
      <van-row
        type="flex"
        justify="space-between"
        align="center"
        class="border_bottom"
      >
        <van-col span="4" class="border_right">
          <div class="sign_icon">
            <van-icon size="24" name="passed" />
            <div>已打卡</div>
          </div>
        </van-col>
        <van-col span="14">
          <div class="text-10" style="marginbottom: 0.5rem">
            <van-icon name="clock-o" size="16" color= '#ff6633' />
            <span>上班打卡<span style="color: #ff6633">08:56</span></span>
          </div>
          <div class="text-10">
            <van-icon size="18" color= '#ff6633' name="location-o" />中国安徽省合肥市肥西县云飞路
          </div>
        </van-col>
        <van-col span="4">
          <van-tag round size="large" type="success">正常</van-tag>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="4" class="border_right">
          <div class="unsign_icon">
            <van-icon size="24" name="close" />
            <div>未打卡</div>
          </div>
        </van-col>
        <van-col span="14" class="center_box">
          <img src="../../../assets/image/sad.png" />
          <span class="text-grey">暂无打卡信息</span>
        </van-col>
        <van-col span="4">
          <van-tag round size="medium" color="#c1bebd" text-color="#fff"
            >未打卡</van-tag
          >
        </van-col>
      </van-row>
    </div>
    <van-row
      type="flex"
      justify="space-between"
      align="center"
      class="postion_box"
    >
      <van-col span="1">
        <van-icon size="18" name="location-o" color="#ff6633" />
      </van-col>
      <van-col span="16">中国安徽省合肥市肥西县云飞路</van-col>
      <van-col span="6">
        <van-icon color="#c1bebd" size="14" name="replay" />
        <span style="color: #c1bebd; fontsize: 10px">重新定位</span>
      </van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col class="time_box">{{ currentTime }}</van-col>
    </van-row>
    <van-row type="flex" justify="space-around">
      <van-col>
        <van-button
          color="#dfdddc"
          @click="modalShow = true"
          round
          icon="setting-o"
          >上班</van-button
        >
      </van-col>
      <van-col>
        <van-button color="#ff6633" round icon="star-o">下班</van-button>
      </van-col>
    </van-row>
    <van-popup v-model="modalShow">
      <p>已经打过卡了，是否要更新打卡记录？</p>
      <p>上次打卡时间09：02</p>
      <van-row type="flex" justify="end" style="color:green">
        <van-col @click="modalShow = false" span="4">取消</van-col>
        <van-col @click="modalShow = false" span="4">确定</van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ClockIn',
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },
  data () {
    return {
      currentTime: '',
      modalShow: false
    }
  },
  mounted () {
    const _this = this
    this.timer = setInterval(() => {
      const d = new Date()
      _this.currentTime = d.toLocaleTimeString()
    })
  },
  created () {},
  beforeDestroy () {
    if (this.currentTime) {
      clearInterval(this.timer) // 清除定时器
    }
  },
  methods: {
    click () {
    }
  }
}
</script>

<style lang="less" scoped>
.top_bg {
  background: url("../../../assets/image/clock_bg.jpeg") no-repeat;
  background-size: 100% 100%;
  height: 11rem;
  position: relative;
  .check_icon {
    position: absolute;
    bottom: -1.5rem;
    right: 1rem;
    color: #ff6633;
    font-size: 36px;
    z-index: 999;
  }
}
.top_right {
  margin-left: 1.25rem;
  color: #fff;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
}
.sign_icon {
  background: #ff6633;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.375rem;
  text-align: center;
}
.unsign_icon {
  background: #c1bebd;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.375rem;
  text-align: center;
}
.van-row {
  padding: 0.625rem;
  text-align: left;
}
.border_right {
  border-right: 0.0625rem solid #dfdddc;
}
.border_bottom {
  border-bottom: 0.0625rem solid #dfdddc;
}
.text-10 {
  font-size: 0.625rem;
  line-height: 1.25rem;
}
.postion_box {
  margin-top: 0.625rem;
  padding: 0.625rem;
  background-color: #fff;
  font-size: 0.875rem;
}
.text-grey {
  color: #777;
  font-size: 14px;
  margin-left: 0.5rem;
}
.center_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.time_box {
  font-size: 2rem;
  color: #ff6633;
  margin: 1rem 0;
}
.van-popup {
  width: 75%;
  height: 20%;
  text-align: left;
  padding: 1.25rem 1.875rem;
}
.van-icon{
  margin-right: .375rem;
}
</style>
